#{extends 'overlay.html' /}
<h1>Invite Users to ${project.name}:</h1>
#{note 'highlight'}
	Click on a user to add him to the invitations list
#{/note}<br/><br/>
<div class="left"><h4><img src="/public/images/famfam/arrow2.png"/>Type to filter: <input type="text" id="search_term" onkeyup="search_users(${project.id});" /> </h4><br/>
<div id="results">
<img id="loading" style="display:none;" src="@{'/public/images/loading16.gif'}" /><br/>
	#{list items:users, as:'user'}
		<div id="resuser_${user.id}"><a href="#" onclick="javascript: user_invited(${user.id}, ${user.name})">${user.name}</a></div>	
	#{/list}
	
</div>
</div>
&nbsp;<div class="left"><img src="/public/images/famfam/exchange.png"/></div> &nbsp;
<div class="left">
<div id="invited"><h4><img src="/public/images/famfam/arrow2.png"/>Marked to be invited:</h4><br/><div id="noinv">#{note 'highlight'}No users chosen yet!#{/note}</div></div>
<br/><br/><input id ="sendinv" type="submit" value="Send Invitation(s)" onclick="javascript: send_invitations(${project.id})" style="display:none">
</div>
<script type="text/javascript">

searching = null;
function search_users(pid) {
	$('#loading').show();
	if (searching) {
		searching.abort();
	}
	searching = $.post('/ajax/users?projectId='+pid+'&query='+$("#search_term").val(),
			function(data) {
				str = '';
				if (data.length) {					
					$.each(data, function(id,item) {							
						var flag = true;
						$("#invited div").each(function(){							
							var tmp = $(this).attr("id");
							var st = tmp.substring(8);
							if(st==item.id)
								flag = false;
							});
						if(flag)
							str += '<div id="resuser_'+item.id+'"><a href="#" onclick="javascript: user_invited('+item.id+',\''+item.name+'\', '+pid+');">'+item.name+'</a></div>';						
					});
				} else {
					str = '<br/><font size=2><img src="/public/images/famfam/error.png"/> No matching results found!</font>';
				}
				$('#results').html(str);
				$('#loading').hide();
			});
}

function user_invited(uid, name, pid)
{
	var str = '<div id="invuser_'+uid+'"><a title = "remove" onclick ="javascript: undo_inv('+uid+',\''+name+'\');"><img src="/public/images/famfam/remove.png"/></a>&nbsp;<font size="2">'+name+'</font>&nbsp;&nbsp;<a title = "specify role ?" href="#" onclick ="javascript: $(\'#selectrole_'+uid+'\').slideToggle(200);"><img src="/public/images/famfam/toggle-open.gif"/></a> <form id="selectrole_'+uid+'" style = "display:none">';
	$.post("@{Invites.getProjectRoles()}", {id:pid},
			function(data){
			$.each(data, function(id,item){
					if(!item.baseRole)
						str += '<input type="radio" name="group_'+uid+'" value="'+item.id+'"/>'+item.name+'<br/>';					
					else
						str += '<input type="radio" name="group_'+uid+'" value="'+item.id+'" checked/>'+item.name+'<br/>';
				});

			str+= "</form></div>";
			$('#resuser_'+uid).hide();
			$('#noinv').hide();
			$('#sendinv').show();
			$('#invited').append(str);
	
			});	
	
}
function send_invitations()
{
	var count =0;
	$("#invited div").each(function(){									 
		var tmpo = $(this).attr("id").substring(0,8);		
		if(tmpo == "invuser_")
		{	var uid = $(this).attr("id").substring(8);
				var rid=-1;
				$("#selectrole_"+uid+" input").each(function(){
					var roleId = $(this).attr("value");
					var checked = $(this).attr("checked");
					if(checked)
						rid = roleId;					
					});
			$.post('@{Invites.sendInvite}',
				{rId:rid, userId:uid},
				function(){
					parent_message_bar('Invitation(s) sent successfully!');
					window.parent.$('#getOverlay').hide();
					});}
		count++;
		});
}
function undo_inv(id)
{
	$('#invuser_'+id).remove();
	$('#selectrole_'+id).remove();
	$('#resuser_'+id).show();	
	var items = document.getElementById("invited").getElementsByTagName("div");
	if(items.length-2 == 0)
	{
		$('#noinv').show();
		$('#sendinv').hide();
	}	
}


</script>